<template>
  <v-main class="tabs-container">
    <v-tabs
      v-model="tabs"
      grow
      background-color="#ecedee"
      height="40px"
      hide-slider
      class="tabs"
    >
      <v-tab
        v-for="n in tabsTitle"
        :key="n"
        class="tab"
        active-class="tab-checked"
      >
        {{ n }}
      </v-tab>
    </v-tabs>
    <v-tabs-items v-model="tabs" class="tabs-items">
      <v-tab-item>
        <v-btn-toggle
          v-model="text"
          tile
          color="deep-purple accent-3"
          group
          dark
          dense
          class="btn-group"
        >
          <v-btn
            height="40px"
            width="30%"
            min-width="84px"
            value="left"
            class="btn btn-checked"
            >All 23</v-btn
          >
          <v-btn
            height="40px"
            width="30%"
            min-width="84px"
            value="right"
            class="btn btn-unchecked"
            >Unread 8</v-btn
          >
        </v-btn-toggle>

        <template>
          <v-card elevation="16" max-width="360" class="mx-auto tabs-card" dark>
            <v-subheader class="subheader">Tuesday</v-subheader>
            <v-list two-line>
              <v-list-item-group v-model="selectedItem1" color="primary">
                <v-virtual-scroll
                  :bench="benched"
                  :items="items1"
                  max-height="310"
                  item-height="74"
                >
                  <template v-slot:default="{ item }">
                    <v-list-item :key="item.id" class="list-item">
                      <template v-slot:default="{ active }">
                        <v-list-item-avatar>
                          <v-img :src="item.avatar"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-content>
                          <v-list-item-title
                            v-text="item.title"
                          ></v-list-item-title>

                          <v-list-item-subtitle
                            v-text="item.subtitle"
                          ></v-list-item-subtitle>
                        </v-list-item-content>

                        <v-list-item-action>
                          <v-icon v-if="!active" color="red lighten-1">
                            mdi-alert-circle
                          </v-icon>

                          <v-icon v-else color="yellow darken-3">
                            mdi-alert-circle
                          </v-icon>

                          <v-list-item-action-text
                            v-text="item.action"
                          ></v-list-item-action-text>
                        </v-list-item-action>
                      </template>
                    </v-list-item>
                    <v-divider></v-divider>
                  </template>
                </v-virtual-scroll>
              </v-list-item-group>
            </v-list>
          </v-card>
        </template>

        <template>
          <v-card
            elevation="16"
            max-width="360"
            class="mx-auto tabs-card"
            light
          >
            <v-subheader class="subheader bg-subheader">Order</v-subheader>
            <v-list two-line>
              <v-list-item-group v-model="selectedItem2" color="primary">
                <v-virtual-scroll
                  :bench="benched"
                  :items="items2"
                  max-height="310"
                  item-height="74"
                >
                  <template v-slot:default="{ item }">
                    <v-list-item :key="item.id" class="list-item bg-white">
                      <template v-slot:default="{ active }">
                        <v-list-item-avatar>
                          <v-img :src="item.avatar"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-content>
                          <v-list-item-title
                            v-text="item.title"
                          ></v-list-item-title>

                          <v-list-item-subtitle
                            v-text="item.subtitle"
                          ></v-list-item-subtitle>
                        </v-list-item-content>

                        <v-list-item-action>
                          <v-icon v-if="!active" color="red lighten-1">
                            mdi-alert-circle
                          </v-icon>

                          <v-icon v-else color="yellow darken-3">
                            mdi-alert-circle
                          </v-icon>

                          <v-list-item-action-text
                            v-text="item.action"
                          ></v-list-item-action-text>
                        </v-list-item-action>
                      </template>
                    </v-list-item>
                    <v-divider></v-divider>
                  </template>
                </v-virtual-scroll>
              </v-list-item-group>
            </v-list>
          </v-card>
        </template>

        <SkeletonLoader :attrs="skeletonAttrs" />
      </v-tab-item>
      <v-tab-item></v-tab-item>
    </v-tabs-items>
  </v-main>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import LangConst from "@/common/constants/LangConst";
import SkeletonLoader from "@/components/SkeletonLoader/SkeletonLoader.vue";

@Component({
  components: {
    SkeletonLoader,
  },
})
export default class InboxTabs extends Vue {
  LangConst = LangConst;

  get skeletonAttrs() {
    return {
      height: "100vh", //设定组件的高度
      width: "100vw", //设定组件的宽度
      tile: false, //删除组件中的 border-radius 样式
      type: "list-item-two-line@12", //样式
    };
  }

  tabs = null;
  tabsTitle = ["Inbox", "Notification"];

  text = "left";
  selected = [0];
  benched = 0;

  selectedItem1 = [2];
  selectedItem2 = [2];

  items1 = [
    {
      id: "1",
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      action: "15 min",
      headline: "Brunch this weekend?",
      subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
      title: "Ali Connors",
    },
    {
      id: "2",
      avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
      action: "2 hr",
      headline: "Summer BBQ",
      subtitle: `Wish I could come, but I'm out of town this weekend.`,
      title: "me, Scrott, Jennifer",
    },
    {
      id: "3",
      avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
      action: "6 hr",
      headline: "Oui oui",
      subtitle: "Do you have Paris recommendations? Have you ever been?",
      title: "Sandra Adams",
    },
    {
      id: "4",
      avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
      action: "12 hr",
      headline: "Birthday gift",
      subtitle:
        "Have any ideas about what we should get Heidi for her birthday?",
      title: "Trevor Hansen",
    },
    {
      id: "5",
      avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "6",
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "7",
      avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
  ];

  items2 = [
    {
      id: "5",
      avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "6",
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "7",
      avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "8",
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "9",
      avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
    {
      id: "10",
      avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      action: "18hr",
      headline: "Recipe to try",
      subtitle: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      title: "Britta Holt",
    },
  ];
  mounted() {
    this.$store.dispatch({
      type: "SkeletonLoaderStore/changeSkeletonLoaderStatusSync",
      parameter: {
        timeLength: 3000, //持续时长
      },
    });
  }
}
</script>

<style lang="scss">
@import "@/components/Inbox/InboxTabs.scss";
</style>
